<script setup>


import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";

onMounted(()=>{
  axios.get('https://mock.apifox.com/m1/2893111-0-default/depts').then((res)=>{
    console.log(res.data);
    tableData.value = res.data
  })
})

const tableData= ref([])
const a = ref
const dialogVisible2 = ref(false)
const dialogVisible1 = ref(false)
const handleClose = (done) => {
  ElMessageBox.confirm('确定要关闭吗?')
      .then(() => {
        done()
      })
      .catch(() => {

      })
}

let lastActionTime = new Date().getTime();

let formattedDate = ""
// 监听鼠标点击事件
document.addEventListener('click', () => {
  lastActionTime = new Date().getTime();
  const date = new Date(lastActionTime);
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hour = ('0' + date.getHours()).slice(-2);
  const minute = ('0' + date.getMinutes()).slice(-2);
  const second = ('0' + date.getSeconds()).slice(-2);
  formattedDate= `${year}-${month}-${day} ${hour}:${minute}:${second}`;
})


const form = ref({
  deptName: undefined,
})

const form2 =ref({
  deptName:undefined,
})

const upDate = (index)=>{
  dialogVisible2.value = true
  form.value = tableData.value[index]
  form.value.index = index

}
const upDateOk = (index)=>{
  console.log(index);
  tableData.value[index]= form.value
  tableData.value[index].updateTime= formattedDate
  dialogVisible2.value = false
}

const del =(index)=>{
  tableData.value.splice(index, 1)
}


const addData=()=>{
  dialogVisible1.value = true
  const s = {deptName:''}
  form2.value=s
}


const addName = ()=>{
  form2.value.updateTime = formattedDate
  tableData.value.push(form2.value)
  dialogVisible1.value = false
}

const ruleFormRef=ref()
</script>


<template>
  <!-- ----------------------------------------------------  -->
  <el-button type="primary" @click="addData()">+ 新增部门</el-button>
  <br><br>
  <el-table :data="tableData" border style="width: 100%">

    <el-table-column label="序号" width="60" >
      <template #default="scope">
        {{scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column prop="deptName" label="部门名称" width="240" />
    <el-table-column prop="updateTime" label="最后操作时间" width="300" />
    <el-table-column  label=" 操作" >
      <template #default="scope">
        <el-button link type="danger"  @click="del(scope.$index)">删除</el-button>
        <el-button link type="warning"  @click="upDate(scope.$index)" >修改</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!--增加弹框-->
  <el-dialog
      v-model="dialogVisible1"
      title="增加部门名称"
      width="30%"
      :before-close="handleClose"
  >

    <el-form :model="form2" label-width="120px"  >
      <el-form-item label="部门名称">
        <el-input v-model="form2.deptName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addName()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>




  <!--  修改弹框-->
  <el-dialog
      v-model="dialogVisible2"
      title="修改部门名称"
      width="30%"
      :before-close="handleClose"
  >

    <el-form :model="form" label-width="120px">
      <el-form-item label="部门名称">
        <el-input v-model="form.deptName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="upDateOk(form.index)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- ----------------------------------------------------  -->
</template>


<style>

</style>